<template>
  <div class="upload22222" @click="handleTemplatedownload">
    <slot name="downloadLink">
      <el-button :icon="Download" size="small" type="primary">下载</el-button>
    </slot>
  </div>
</template>

<script>
import { downloadFile } from "@/api/mains";
import { Download } from "@element-plus/icons-vue";
import { ElLoading } from "element-plus";
export default defineComponent({
  name: "UploadDirect",
  components: {},
  props: {
    templatefilename: {
      type: String,
      default: ""
    }
  },
  emits: {},
  setup(props) {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      loading: false,
      title: "下载",
      templatefilename: ""
    });

    state.templatefilename = ref(props.templatefilename);

    const handleTemplatedownload = async () => {
      proxy.$baseConfirm("你确定要下载此文件吗", null, async () => {
        const loading = ElLoading.service({
          lock: true,
          text: "下载中，请稍候...",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const filepath = state.templatefilename;
        if (filepath != null && filepath != "") {
          downloadFile({ fileName: filepath })
            .then(res => {
              const link = document.createElement("a");

              const blob = new Blob([res], {
                type: "application/octer-stream"
              });

              link.style.display = "none";

              link.href = URL.createObjectURL(blob);

              link.setAttribute("download", filepath);

              document.body.appendChild(link);

              link.click();

              document.body.removeChild(link);

              loading.close();

              proxy.$baseMessage("下载中", "success", false, "vab-hey-message-success");
            })
            .catch(err => {
              loading.close();
              console.log(err);
            });
        } else {
          loading.close();
          proxy.$baseMessage("文件路径不存在", "error", false, "vab-hey-message-error");
        }
      });
    };

    return {
      ...toRefs(state),
      handleTemplatedownload,
      Download
    };
  }
});
</script>

<style lang="scss" scoped>
.upload {
  height: 45vh;
  .upload-content {
    .el-upload__tip {
      display: block;
      height: 30px;
      line-height: 30px;
    }
    :deep() {
      .el-upload--picture-card {
        width: 128px;
        height: 128px;
        margin: 3px 8px 8px;
        border: 2px dashed #c0ccda;
      }
      .el-upload-list--picture {
        margin-bottom: 20px;
      }
      .el-upload-list--picture-card {
        .el-upload-list__item {
          width: 128px;
          height: 128px;
          margin: 3px 8px 8px;
        }
      }
    }
  }
}
.text-left {
  padding-left: 30px;
  text-align: left;
}
h3 {
  padding-bottom: 20px;
}
.cust_btn30 {
  padding-top: 30px;
  padding-bottom: 60px;
}
.text_fise {
  font-size: 16px;
}
.text_fise > div {
  padding-bottom: 20px;
}
</style>
